import React, { PureComponent } from 'react';
import { InputNumberC, SelectC } from '../../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, message } from 'antd';
import { connect } from 'dva';
import style from './myStyle.less';
import config from '../../../InvestmentManage/depositOrderNew/config';
import FormItemLayout from './formItemLayout';

@connect(({ depositOrderM, userM: user, loading }) => ({
  depositOrderM,
  user,
  loading,
}))
@Form.create()
export default class DepositOrder extends PureComponent {
  static defaultProps = {
    onRef: () => {},
  };
  state = {
    depositInfo: undefined, //存款详情
    typeList: config.typeList, //存款类型
    branchBankList: [], //存款分行
    accountList: [], //存款账户
  };
  componentDidMount() {
    this.props.onRef(this);
    this.setState(
      {
        depositInfo: this.props.depositInfo,
      },
      () => {
        this.setValues();
      },
    );
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    //存款详情默认是undefined，当存款详情变更时，更新初始化值；
    if (nextProps.depositInfo && JSON.stringify(nextProps.depositInfo) !== JSON.stringify(this.state.depositInfo)) {
      this.setState(
        {
          depositInfo: nextProps.depositInfo,
        },
        () => {
          this.setValues();
        },
      );
    }
  }
  //reset 重置
  reset = () => {
    this.setState({
      depositInfo: undefined, //存款详情
      typeList: [], //存款类型
      branchBankList: [], //存款分行
    });
    this.props.form.resetFields();
  };
  //回填详情信息
  setValues = () => {
    const { depositInfo } = this.state;
    if (!depositInfo || !depositInfo.combCode) return;
    const bankHead = depositInfo.bankHeadOfficeId ? depositInfo.bankHeadOfficeId : depositInfo.bankHeadOfficeName;
    //获取总行的下拉列表
    this.getHeadBankList(bankHead);
    this.getAccountInfo(bankHead);
    this.props.form.setFieldsValue({
      // remark:depositInfo.remark,
      depositType: depositInfo.depositType,
      bankHeadOfficeName: bankHead,
      bankBranchName: depositInfo.bankBranchName,
      bankDepositBalance: depositInfo.bankDepositBalance,
      account: depositInfo.account,
      bankDepositRate: depositInfo.bankDepositRate,
    });
  };

  //查询总行列表
  getHeadBankList = (value) => {
    this.props.dispatch({
      type: 'depositOrderM/getHeadBankList',
      payload: {
        productId: this.props.depositInfo.combCode,
        value: value ? value : '',
      },
      callback: (type, value, data) => {
        if (type == 'success') {
          this.setState({
            headBankList: data || [],
          });
        } else {
          this.setState({
            headBankList: [],
          });
        }
      },
    });
  };
  //根据分行查询存款账户
  getAccountInfo = (bankHead) => {
    const { depositInfo } = this.props;
    this.props.dispatch({
      type: 'depositOrderM/getAccountInfo',
      payload: {
        branchBankName: depositInfo.bankBranchName,
        bankNo: bankHead,
        accountType: depositInfo.depositType,
        productId: depositInfo.combCode,
      },
      callback: (type, data) => {
        if (type == 'success') {
          this.setState({
            accountList: data,
          });
        } else {
          this.setState({
            accountList: [],
          });
        }
      },
    });
  };
  getInfo = () => {
    //获取表单信息
    let query;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        if (values.bankDepositBalance > this.props.depositInfo.bankDepositBalance) {
          message.error('存款金额不能大于当前选中持仓的存款金额');
          return;
        }
        query = values;
      }
    });
    return query;
  };
  //form表单渲染
  formRender = () => {
    const { typeList } = this.props;
    const { branchBankList = [], headBankList = [], accountList } = this.state;
    return (
      <div>
        <Row className={style.mg5}>
          <Col span={24}>
            <SelectC
              form={this.props.form} // form对象
              title='存款类型' // 显示名称
              dataIndex='depositType' // Form识别的Item ID
              dataSource={typeList}
              isMultiple={false}
              optionTitle={true}
              formItemLayout={FormItemLayout}
              disabled={true}
              rules={[{ required: true, message: '请选择存款类型!' }]}
            />
          </Col>
          <Col span={24}>
            <SelectC
              form={this.props.form} // form对象
              title='存款总行' // 显示名称
              dataIndex='bankHeadOfficeName' // Form识别的Item ID
              dataSource={headBankList.map((item) => {
                return { value: item.bankNo, title: item.bankName };
              })}
              isMultiple={false}
              optionTitle={true}
              showSearch={true}
              formItemLayout={FormItemLayout}
              disabled={true}
              rules={[{ required: true, message: '请选择存款总行!' }]}
            />
          </Col>

          <Col span={24}>
            <SelectC
              form={this.props.form} // form对象
              title='存款分行' // 显示名称
              dataIndex='bankBranchName' // Form识别的Item ID
              dataSource={
                branchBankList &&
                branchBankList.map((item) => {
                  return { value: item.branchBankName, title: item.branchBankName };
                })
              }
              isMultiple={false}
              optionTitle={true}
              formItemLayout={FormItemLayout}
              disabled={true}
              rules={[{ required: true, message: '请选择存款分行!' }]}
            />
          </Col>
          <Col span={24}>
            <SelectC
              form={this.props.form} // form对象
              title='存款账户' // 显示名称
              dataIndex='account' // Form识别的Item ID
              dataSource={
                accountList &&
                accountList.map((item) => {
                  return { value: item.value, title: item.value + '-' + item.title };
                })
              }
              isMultiple={false}
              optionTitle={true}
              showSearch={true}
              formItemLayout={FormItemLayout}
              disabled={true}
              rules={[{ required: true, message: '请选择存款账户!' }]}
            />
          </Col>
          <Col span={24}>
            <InputNumberC
              form={this.props.form} // form对象
              dataIndex={'bankDepositRate'}
              title='存款利率'
              unit='%'
              min={0}
              splitStyle={false}
              formItemLayout={FormItemLayout}
              rules={[{ required: true, message: '请输入存款利率!' }]}
              precision={2}
              disabled={true}
            />
          </Col>
          <Col span={24}>
            <InputNumberC
              form={this.props.form} // form对象
              dataIndex={'bankDepositBalance'}
              title='存款金额'
              unit='元'
              splitStyle={true}
              formItemLayout={FormItemLayout}
              rules={[{ required: true, message: '请输入存款金额!' }]}
              precision={2}
            />
          </Col>
        </Row>
      </div>
    );
  };

  render() {
    return <div>{this.formRender()}</div>;
  }
}
